import {Table, Button, Pagination, PaginationProps, Space} from 'antd'
import {history} from 'umi'
import {
	PoweroffOutlined,
	ArrowUpOutlined,
	ArrowDownOutlined,
} from '@ant-design/icons'
import type {ColumnsType} from 'antd/es/table'
import React, {memo} from 'react'
import styles from './index.less'

import Search from '../search/index'

interface DataType {
	key: string
	dh: string
	stuta: string
	lx: string
	org: string
	city: string
	dep: string
	lm: string
	des: string
	gys: string
	time: string
	apply: string
}

const columns: ColumnsType<DataType> = [
	{
		title: '序号',
		dataIndex: 'key',
		align: 'center',
	},
	{
		title: '采购申请单号',
		dataIndex: 'dh',
		align: 'center',
	},
	{
		title: '审核状态',
		dataIndex: 'stuta',
		align: 'center',
	},
	{
		title: '立项编号',
		dataIndex: 'lx',
		align: 'center',
	},
	{
		title: '需求组织',
		dataIndex: 'org',
		align: 'center',
	},
	{
		title: '需求城市',
		dataIndex: 'city',
		align: 'center',
	},
	{
		title: '需求部门',
		dataIndex: 'dep',
		align: 'center',
	},
	{
		title: '采购类目',
		dataIndex: 'lm',
		align: 'center',
	},
	{
		title: '采购描述',
		dataIndex: 'des',
		align: 'center',
	},
	{
		title: '供应商',
		dataIndex: 'gys',
		align: 'center',
	},
	{
		title: '申请时间',
		dataIndex: 'time',
		align: 'center',
	},
	{
		title: '申请人',
		dataIndex: 'apply',
		align: 'center',
	},
	{
		title: '操作',
		dataIndex: 'opt',
		align: 'center',
		// eslint-disable-next-line jsx-a11y/anchor-is-valid
		render: () => <a>Delete</a>,
	},
]

const data: DataType[] = [
	{
		key: '1',
		dh: 'CS92837748',
		stuta: '0',
		lx: 'LX0221018',
		org: '车胜惠迪',
		city: '广州/深圳',
		dep: '资产部',
		lm: '实物类--零配件',
		des: '脚垫/100片/2022-08-12',
		gys: 'XXXX公司',
		time: '2019/12/23 14:07:23',
		apply: '张三',
	},
	{
		key: '2',
		dh: 'CS92837748',
		stuta: '0',
		lx: 'LX0221018',
		org: '车胜惠迪',
		city: '广州/深圳',
		dep: '资产部',
		lm: '实物类--零配件',
		des: '脚垫/100片/2022-08-12',
		gys: 'XXXX公司',
		time: '2019/12/23 14:07:23',
		apply: '张三',
	},
	{
		key: '3',
		dh: 'CS92837748',
		stuta: '0',
		lx: 'LX0221018',
		org: '车胜惠迪',
		city: '广州/深圳',
		dep: '资产部',
		lm: '实物类--零配件',
		des: '脚垫/100片/2022-08-12',
		gys: 'XXXX公司',
		time: '2019/12/23 14:07:23',
		apply: '张三',
	},
	{
		key: '4',
		dh: 'CS92837748',
		stuta: '0',
		lx: 'LX0221018',
		org: '车胜惠迪',
		city: '广州/深圳',
		dep: '资产部',
		lm: '实物类--零配件',
		des: '脚垫/100片/2022-08-12',
		gys: 'XXXX公司',
		time: '2019/12/23 14:07:23',
		apply: '张三',
	},
	{
		key: '5',
		dh: 'CS92837748',
		stuta: '0',
		lx: 'LX0221018',
		org: '车胜惠迪',
		city: '广州/深圳',
		dep: '资产部',
		lm: '实物类--零配件',
		des: '脚垫/100片/2022-08-12',
		gys: 'XXXX公司',
		time: '2019/12/23 14:07:23',
		apply: '张三',
	},
	{
		key: '6',
		dh: 'CS92837748',
		stuta: '0',
		lx: 'LX0221018',
		org: '车胜惠迪',
		city: '广州/深圳',
		dep: '资产部',
		lm: '实物类--零配件',
		des: '脚垫/100片/2022-08-12',
		gys: 'XXXX公司',
		time: '2019/12/23 14:07:23',
		apply: '张三',
	},
	{
		key: '7',
		dh: 'CS92837748',
		stuta: '0',
		lx: 'LX0221018',
		org: '车胜惠迪',
		city: '广州/深圳',
		dep: '资产部',
		lm: '实物类--零配件',
		des: '脚垫/100片/2022-08-12',
		gys: 'XXXX公司',
		time: '2019/12/23 14:07:23',
		apply: '张三',
	},
	{
		key: '8',
		dh: 'CS92837748',
		stuta: '0',
		lx: 'LX0221018',
		org: '车胜惠迪',
		city: '广州/深圳',
		dep: '资产部',
		lm: '实物类--零配件',
		des: '脚垫/100片/2022-08-12',
		gys: 'XXXX公司',
		time: '2019/12/23 14:07:23',
		apply: '张三',
	},
	{
		key: '9',
		dh: 'CS92837748',
		stuta: '0',
		lx: 'LX0221018',
		org: '车胜惠迪',
		city: '广州/深圳',
		dep: '资产部',
		lm: '实物类--零配件',
		des: '脚垫/100片/2022-08-12',
		gys: 'XXXX公司',
		time: '2019/12/23 14:07:23',
		apply: '张三',
	},
	{
		key: '10',
		dh: 'CS92837748',
		stuta: '0',
		lx: 'LX0221018',
		org: '车胜惠迪',
		city: '广州/深圳',
		dep: '资产部',
		lm: '实物类--零配件',
		des: '脚垫/100片/2022-08-12',
		gys: 'XXXX公司',
		time: '2019/12/23 14:07:23',
		apply: '张三',
	},
	{
		key: '11',
		dh: 'CS92837748',
		stuta: '0',
		lx: 'LX0221018',
		org: '车胜惠迪',
		city: '广州/深圳',
		dep: '资产部',
		lm: '实物类--零配件',
		des: '脚垫/100片/2022-08-12',
		gys: 'XXXX公司',
		time: '2019/12/23 14:07:23',
		apply: '张三',
	},
]

export default memo(() => (
	<div className={styles.table}>
		<div className="content">
			<div>
				<Search />{' '}
			</div>
			<div className="btnlist">
				<Space size={12}>
					<Button
						icon={<PoweroffOutlined />}
						type="primary"
						ghost
						size="small"
						onClick={() => {
							history.push('/purchase/apply/add')
						}}>
						新增
					</Button>
					<Button
						icon={<ArrowUpOutlined />}
						className="warning"
						ghost
						size="small">
						导入
					</Button>
					<Button
						icon={<ArrowDownOutlined />}
						className="import"
						ghost
						size="small">
						导出
					</Button>
				</Space>
			</div>
			<div>
				<Table
					rowSelection={{
						type: 'checkbox',
					}}
					columns={columns}
					dataSource={data}
					bordered
					pagination={false}
				/>
			</div>
			<div className="pagination">
				<Pagination
					showQuickJumper
					defaultCurrent={1}
					total={data.length}
				/>
			</div>
		</div>
	</div>
))
